<template>
  <div class="spec-preview">
    <!-- vue-photo-zoom-pro：插件提供的组件 -->
    <!-- high-url：放大以后的图片 -->
    <!-- out-zoomer=：将放大镜在图片外部展示 -->
    <!-- width、height：选择器的宽高 -->
    <vue-photo-zoom-pro :high-url="imageUrl" :out-zoomer="true" :width="200" :height="200">
      <img :src="imageUrl" />
    </vue-photo-zoom-pro>
  </div>
</template>

<script>
// 导入插件提供的组件和样式
import vuePhotoZoomPro from 'vue-photo-zoom-pro'
import 'vue-photo-zoom-pro/dist/style/vue-photo-zoom-pro.css'

export default {
  name: 'VZoom',
  components: {
    vuePhotoZoomPro
  },
  props: {
    imgUrl: String
  },
  data() {
    return {
      imageUrl: this.imgUrl
    }
  },
  mounted() {
    this.eventBus.$on('sendImg', (imageUrl) => {
      // console.log(imageUrl)
      this.imageUrl = imageUrl
    })
  }
}
</script>

<style lang="less">
.spec-preview {
  position: relative;
  width: 400px;
  height: 400px;
  border: 1px solid #ccc;

  img {
    width: 400px;
    height: 400px;
  }

  .out-zoomer {
    z-index: 99;
    top: 0 !important;
  }

  .selector {
    background-color: rgba(248, 152, 152, 0.2);
  }
}
</style>
